/* 公共样式 */
* {
    /* 让边框跟设定的一样 */
    box-sizing: border-box;
    /* 有些网站有默认的内边距和外边距 */
    /* 去除浏览器默认样式 */
    padding: 0;
    margin: 0;
}

html{
    height: 100%;
}

body{
    background-image: url(../image/theLordOfTheRings.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    /* 让图片填满整个元素 */
    background-size: cover;

    height: 100%;
}

/* 导航栏 */
.nav{
    width: 100%;
    /* 导航栏的高度一般为 50 px */
    height: 50px;

    /* 给导航栏增加透明度，rgba 的第四个参数 */
    background-color: rgba(50, 50, 50, 0.4);
    color: white;

    /* 使用弹性布局，让 nav 中的元素水平排列了 */
    display: flex;
    align-items: center;
}

.nav img{
    width: 40px;
    height: 40px;

    /* 左右设置外边距，出现一些缝隙 */
    margin-left: 30px;
    margin-right: 30px;

    /* 将 logo 设置成圆角矩形，变成圆形 */
    border-radius: 20px;
}

.nav a{
    color: white;
    /* 去掉 a 标签的下划线 */
    text-decoration: none;
    /* 此处使用内边距把多个链接分隔开来 */
    padding: 0 10px;
}

.nav .spacer{
    width: 70%;
}

/* 网页的主体部分，也称之为"版心" */
.container{
    /* 设置成固定宽度，水平居中 */
    width: 1000px;
    margin: 0 auto;

    /* 设置和浏览器一样高的高度 */
    height: calc(100% - 50px);

    display: flex;
    /* 让里面的元素等间距铺开 */
    justify-content: space-between;
}

.container-left{
    height: 100%;
    width: 200px;
}

.container-right{
    height: 100%;
    /* 左右两边留出 5px 的空隙 */
    width: 790px;

    /* 加上白色半透明背景 */
    background-color: rgba(225, 225, 225, 0.8);
    border-radius: 10px;
    padding: 20px;

    /* 当内容超出范围时，自动添加滚动条 */
    overflow: auto;
}

/* 设置用户信息区域 */
.card{
    background-color: rgba(225, 225, 225, 0.8);
    border-radius: 10px;
    padding: 30px;   
}

/* 设置用户头像 */
.card img{
    /* 整个 .card 的宽度为 200 px，并且四个方向设置了 30 px 的内边距 */
    /* 剩下能放图片的就只有 140 px */
    width: 110px;
    height: 110px;
    border-radius: 55px;
}

/* 设置用户名 */
.card h3{
    text-align: center;
    /* 使用内边距将用户名与头像分开 */
    padding: 10px;
}

/* 设置 guiee 地址 */
.card a{
    text-align: center;
    /* 文字设置成灰色的 */
    color: gray;
    /* 去掉下划线 */
    text-decoration: none;
    /* 需要把 a 标签转换成 块级元素，才能居中 */
    display: block;
    /* 让 a 与下方有间隔 */
    margin-bottom: 10px;
}

.card.counter{
    display: flex;
    padding: 5px;
    justify-content: space-around;
}

